// 获取一个食物方块
// 将全局变量放到自调用函数中（形成局部作用域）可以节省计算时间
let Food= function(option){
// 将私有属性放到构造函数中
    // 确保option是属性值
    // option = option||{};
    // 使用三元表达式选择
    option = option instanceof Object? option:{};
    this.width = option.width||20;
    this.height = option.height||20;
    this.x = option.x || 0;
    this.y = option.y || 0;
    this.color = option.color||"yellow";
    this.arr = [];
    var ps = "absolute";
        
// 将一个元素渲染添加到页面上
    Food.prototype.render= function(stage){
    // 创建一个元素
    var ele = document.createElement("div");

    // 设置样式之前先获取随机的一个x和y
    this.x = Tools.getRandom(0,stage.clientWidth/this.width-1)*this.width;
    this.y = Tools.getRandom(0,stage.clientHeight/this.height-1)*this.height;
    
    // 给元素添加样式
    ele.style.width=this.width + "px";
    ele.style.height=this.height + "px";
    ele.style.left=this.x + "px";
    ele.style.top=this.y + "px"
    ele.style.backgroundColor=this.color;
    ele.style.position= ps;
    //将元素添加给父级
    stage.appendChild(ele);
    // 将元素添加给空的数组
    this.arr.push(ele);
    }
// 删除父级内部的一个div元素
    Food.prototype.remove= function(stage,i){
    // 通过一些方法获取下标

    //  删除html结构中的div
    stage.removeChild(this.arr[i]);
    // 删除数组中的div
    this.arr.splice(i,1);
    }
    // 利用window对象暴露food,因此函数可以给外部使用
    window.Food = Food;
}

